document.getElementById("homePage").innerHTML = `
<style>
    first-typed{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #fff;
        text-align: center;
    }
    #one{
        width: 100vw;
        height: 100vh;
    }
    .blog{
        width: 1200px;
        margin: auto;
    }
.blog_list{
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-shrink: auto;
}
.article_item img {
    border-radius: 10px;
}
.article_item{
    width: 550px;
    height: 350px;
    margin: 10px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    background-color: #fff;
    /* background-color: #fae6e6; */
    box-shadow:  1px 1px rgba(0,0,0,0.5)
}

.blog_list .article_item img{
        width: 100%;
        height: 200px;
        object-fit: cover;
       
}

.article_item .article_content{
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;

}
.article_item .date{
    color: #646363;
    margin-left: 460px;
}


</style>
<body>

 
        <section id="one">
        <first-typed 
        strings='["欢迎进入First Nice团队打造的第一博客"]' 
        speed="500"
        font-size="35px"
        color="#fff">
      </first-typed>
    </section>
    <section id="two">
        <main class="blog">
            <div>
              <div>
                📑文章
              </div>
               <div class="blog_list">
                   <div class="article_item"> 
                       <img src="images/bg2.png">
                       <div class="article_content"> 
                           <h1>这是标题</h1>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, ex non gravida mattis, felis ligula ornare velit, id lobortis sem neque id enim. Nullam facilisis, justo nec consectetur congue, nunc odio accumsan enim, id dignissim orci nisi id turpis.</p> 
                       </div> 
                       <p class="date">2024-12-02</p>
                   </div>
                   <div class="article_item">
                       <img src="images/p2.jpg">
                       <div class="article_content"> 
                           <h1>这是标题</h1>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, ex non gravida mattis, felis ligula ornare velit, id lobortis sem neque id enim. Nullam facilisis, justo nec consectetur congue, nunc odio accumsan enim, id dignissim orci nisi id turpis.</p> 
                       </div> 
                       <p class="date">2024-12-02</p>
                   </div>
                   <div class="article_item">
                       <img src="images/p3.jpg">
                       <div class="article_content"> 
                           <h1>这是标题</h1>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, ex non gravida mattis, felis ligula ornare velit, id lobortis sem neque id enim. Nullam facilisis, justo nec consectetur congue, nunc odio accumsan enim, id dignissim orci nisi id turpis.</p> 
                       </div> 
                       <p class="date">2024-12-02</p>
                   </div>
                   <div class="article_item">
                       <img src="images/p4.jpg">
                       
                       <div class="article_content"> 
                           <h1>这是标题</h1>
                           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, ex non gravida mattis, felis ligula ornare velit, id lobortis sem neque id enim. Nullam facilisis, justo nec consectetur congue, nunc odio accumsan enim, id dignissim orci nisi id turpis.</p> 
                       </div> 
                       <p class="date">2024-12-02</p>
                   </div>
            </div>
        </main>

 
       
    </section>
    <script>
       
      
    </script>
</body>

`;
window.addEventListener('scroll', function() {
    const header = document.querySelector('header');
    console.log(header);
    if (window.scrollY > 50) {  // 当页面滚动超过50px时
        header.classList.add('shrink');  // 增加shrink类
    } else {
        header.classList.remove('shrink');  // 移除shrink类
    }
});